<template>
  <Dialog v-model="dialogVisible" title="选择标签" width="700px">
    <el-scrollbar max-height="60vh" always>
    <div class="tag-dialog-container">
      <el-tabs v-model="activeTab" class="tag-tabs" tab-position="left">
        <el-tab-pane
          v-for="tab in TagTabs"
          :key="tab.id"
          :label="tab.name"
          :name="tab.id"
        >
          <div class="tag-list">
            <template v-if="tab.type !== 3">
              <el-tag
                v-for="tag in StoreConfigData.userTags.filter(t => t.type === tab.type)"
                :key="tag.id"
                :class="['tag-item', { 'is-selected': isTagSelected(tag) }]"
                @click="toggleTag(tag)"
              >
                {{tag.desc}}
              </el-tag>
            </template>
            <template v-else>
              <div class="custom-tag-section">
                <div class="custom-tag-input">
                  <el-input
                    v-model="customTagInput"
                    placeholder="请输入自定义标签"
                    clearable
                    @keyup.enter="addCustomTag"
                  >
                    <template #append>
                      <el-button @click="addCustomTag">添加</el-button>
                    </template>
                  </el-input>
                </div>
                <div class="custom-tag-list">
                  <el-tag
                    v-for="tag in selectedTags.filter(t => !t.type)"
                    :key="tag.desc"
                    closable
                    class="mr-2"
                    @close="removeCustomTag(tag)"
                  >
                    {{tag.desc}}
                  </el-tag>
                </div>
              </div>
            </template>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    </el-scrollbar>
    <template #footer>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { TagTabs, StoreConfigData } from './constant'

/** 标签选择 表单 */
defineOptions({ name: 'TagListForm' })

const dialogVisible = ref(false)
const activeTab = ref('')
const customTagInput = ref('')
const selectedTags = ref<any[]>([])

// 获取默认标签页
const getDefaultTab = (tags: any[]) => {
  // 如果标签列表为空，默认显示主题标签页
  if (!tags.length) {
    return TagTabs.find(tab => tab.type === 1)?.id
  }
  // 如果有主题标签（type=1），默认显示主题标签页
  if (tags.some(tag => tag.type === 1)) {
    return TagTabs.find(tab => tab.type === 1)?.id
  }
  // 如果有角色标签（type=2），默认显示角色标签页
  if (tags.some(tag => tag.type === 2)) {
    return TagTabs.find(tab => tab.type === 2)?.id
  }
  // 如果都没有或者有自定义标签，显示自定义标签页
  return TagTabs.find(tab => tab.type === 3)?.id
}

// 打开弹窗
const open = (tags: any[] = []) => {
  dialogVisible.value = true
  selectedTags.value = [...tags]
  // 根据当前标签类型设置默认显示的标签页
  activeTab.value = getDefaultTab(tags) || TagTabs[0].id
}
defineExpose({ open })

// 检查标签是否已选中
const isTagSelected = (tag: any) => {
  return selectedTags.value.some(t => t.id === tag.id && t.type === tag.type)
}

// 切换标签选中状态
const toggleTag = (tag: any) => {
  const index = selectedTags.value.findIndex(t => t.id === tag.id && t.type === tag.type)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tag)
  }
}

// 添加自定义标签
const addCustomTag = () => {
  if (customTagInput.value.trim()) {
    const newTag = {
      desc: customTagInput.value.trim()
    }
    if (!selectedTags.value.some(t => !t.type && t.desc === newTag.desc)) {
      selectedTags.value.push(newTag)
    }
    customTagInput.value = ''
  }
}

// 移除自定义标签
const removeCustomTag = (tag: any) => {
  const index = selectedTags.value.findIndex(t => !t.type && t.desc === tag.desc)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  }
}

const emit = defineEmits(['confirm'])

// 确认选择
const handleConfirm = () => {
  emit('confirm', selectedTags.value)
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.tag-dialog-container {
  height: 60vh;
  display: flex;
}

.tag-tabs {
  height: 100%;
  width: 100%;
  
  :deep(.el-tabs__content) {
    height: 100%;
    overflow: auto;
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;

  .tag-item {
    cursor: pointer;
    
    &.is-selected {
      background-color: #409EFF;
      border-color: #409EFF;
      color: white;
    }
  }
}

.custom-tag-section {
  width: 100%;
}

.custom-tag-input {
  margin-bottom: 16px;
}

.custom-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mr-2 {
  margin-right: 8px;
}
</style> 